<template>
	<div class="shop-info">
		<div class="info-content">
			<section class="section">
				<h3 class="section-title">{{shopInfo.description}}</h3>
				<div class="delivery">
					<div>
						<span class="delivery-icon">{{shopInfo.description}}</span>
						<span>由商家配送提供配送，约{{shopInfo.deliveryTime}}分钟送达，距离{{shopInfo.distance}}</span>
					</div>
					<div class="delivery-money">配送费￥{{shopInfo.deliveryPrice}}</div>
				</div>
			</section>
			<div class="split"></div>
			<section class="section">
				<h3 class="section-title">活动与服务</h3>
				<div class="activity">
					<div class="activity-item" :class="supportClass[item.type]" v-for="item,index in shopInfo.supports" :key="index">
						<span class="content-tag">
							<span class="mini-tag">{{item.name}}</span>
						</span>
						<span class="activity-content">{{item.content}}</span>
					</div>
				</div>
			</section>
			<div class="split"></div>

			<section class="section">
				<h3 class="section-title">商家实景</h3>
				<div class="pic-wrapper">
					<ul class="pic-list" ref="picsRef">
						<li class="pic-item" v-for="pic in shopInfo.pics">
							<img width="120" height="90" v-lazy="pic">
						</li>
					</ul>
				</div>
			</section>
			<div class="split"></div>

			<section class="section">
				<h3 class="section-title">商家信息</h3>
				<ul class="detail">
					<li>
						<span class="bold">品类</span>
						<span>{{shopInfo.category}}</span>
					</li>
					<li>
						<span class="bold">商家电话</span>
						<span>{{shopInfo.phone}}</span>
					</li>
					<li>
						<span class="bold">地址</span>
						<span>{{shopInfo.address}}</span>
					</li>
					<li>
						<span class="bold">营业时间</span>
						<span>{{shopInfo.workTime}}</span>
					</li>
				</ul>
			</section>
		</div>
	</div>
</template>


<script>
	import BScroll from 'better-scroll'
	export default {
		data() {
			return {
				// 商家信息
				shopInfo: {},
				// 颜色类
				supportClass: ['activity-green', 'activity-red', 'activity-orange']
			}
		},
		created() {
			this.getShopInfo()
			
			
		},
		mounted() {
			
		
			
		},
		methods: {
			// 获取商家信息
			async getShopInfo() {
				const {	data : res } =	await this.$http.get('/shop_info')
				console.log('商家信息',res)
				
				if(res.code !== 0) return console.log('获取商品列表失败')
				
				this.shopInfo = res.data
			},
			// 初始化
			_initScroll() {
				// 纵向滚动挂载
				if(!this.bScroll) {
					this.bScroll = new BScroll('.shop-info', {
						click: true
					})
				}else {
					this.bScroll.refresh() //刷新
				}
				
				
				// 横向滚动配置宽度
				const itemWidth = 120; //这里是设置列表每一项的宽度
				const margin = 6; //边距
				const count = this.$refs.picsRef.children //几个孩子
				// 横向滑动需要给ul设置宽度
				const ul = this.$refs.picsRef
				ul.style.width = (itemWidth + margin) * count.length - margin + 'px'
				// 横向滚动挂载
				if(!this.imgScroll) {
					this.imgScroll = new BScroll('.pic-wrapper', {
						click: true,
						scrollX: true,
						eventPassthrough: "vertical" //忽略竖直方向的滚动
					})
				}else{
					this.imgScroll.refresh() //刷新
				}
				
			}
		},
		watch: {
			shopInfo(newVal) {
				this.$nextTick(() => {
					this._initScroll()
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	*{
		box-sizing: border-box;
	}
	.shop-info {
		position: absolute;
		top: 252px;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		overflow: hidden;

		.section {
			padding: 16px 14px 14px;
			font-size: 16px;
			background-color: #fff;
			color: #666;
			border-bottom: 1px solid #eee;
			position: relative;
		}

		.section-title {
			color: #000;
			font-weight: 700;
			line-height: 16px;

			>.iconfont {
				float: right;
				color: #ccc;
			}
		}

		.delivery {
			margin-top: 16px;
			font-size: 13px;
			line-height: 18px;

			.delivery-icon {
				width: 55px;
				font-size: 11px;
				margin-right: 10px;
				display: inline-block;
				text-align: center;
				color: #fff;
				background-color: #0097ff;
				padding: 1px 0;
				border-radius: 4px;
			}

			.delivery-money {
				margin-top: 5px;
			}
		}

		.activity {
			margin-top: 16px;

			.activity-item {
				margin-bottom: 12px;
				display: flex;
				font-size: 13px;
				align-items: center;

				&.activity-green {
					.content-tag {
						background-color: rgb(112, 188, 70);
					}
				}

				&.activity-red {
					.content-tag {
						background-color: rgb(240, 115, 115);
					}
				}

				&.activity-orange {
					.content-tag {
						background-color: rgb(241, 136, 79);
					}
				}

				.content-tag {
					display: inline-block;
					border-radius: 2px;
					width: 36px;
					height: 18px;
					margin-right: 10px;
					color: #fff;
					font-style: normal;
					position: relative;

					.mini-tag {
						position: absolute;
						left: 0;
						top: 0;
						right: -100%;
						bottom: -100%;
						font-size: 24px;
						transform: scale(.5);
						transform-origin: 0 0;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}

		.pic-wrapper {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			margin-top: 16px;

			.pic-list {
				font-size: 0;

				.pic-item {
					display: inline-block;
					margin-right: 6px;
					width: 120px;
					height: 90px;

					&:last-child {
						margin: 0;
					}
				}
			}
		}

		.detail {
			margin-bottom: -16px;

			>li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-right: -10px;
				padding: 16px 12px 16px 0;
				line-height: 16px;
				border-bottom: 1px solid #eee;
				font-size: 13px;

				>.bold {
					font-weight: 700;
					color: #333;

					&:last-child {
						border: none;
					}
				}
			}
		}
	}
</style>
